import React from 'react'
import ReceivableComStyle from './receivable.module.css'
import {ReactComponent as ItemFiveIcon} from '../../../../../../assets/icon/home/应收金额.svg'
import { Button } from 'antd'
import { useSpring,animated } from '@react-spring/web'
const formatCurrency=(value)=>{
  return new Intl.NumberFormat('de-DE', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  }).format(value);
}
const CurrencyScroller=({endAmount})=>{
  const [amount,setAmount] = React.useState(0)
  React.useEffect(()=>{
    setAmount(endAmount)
  },[endAmount])
  const props=useSpring({
    form:{amount:0},
    to:{amount:amount},
    config:{
      duration:2000
    }
  })
  return (
    <animated.span>
      {
        props.amount.to((n)=>formatCurrency(n))
      }
    </animated.span>
  )
}
function ReceivableComponent() {
  return (
    <div className={ReceivableComStyle.amount_app_item}>
        <div className={ReceivableComStyle.amount_app_item_left}>
          <p>
            <span><CurrencyScroller endAmount={698.12}/></span>
            <span>+20.32%</span>
          </p>
          <Button style={{ width: "80%", margin: "10px 0" }}>应收金额</Button>
        </div>
        <div className={ReceivableComStyle.amount_app_item_right}>
          <ItemFiveIcon width={70} />
        </div>
      </div>
  )
}

export default ReceivableComponent
